<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言</title>
    <style>
    
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
        }
        form{
            margin-right:  auto;
            margin-left: auto;
            margin-top:20px;
            width: 60%;
            display: table;
           
        }
        .form{
            background: #FFFFaa;
            border:1px #333 solid;
        }
        .form h4{
            margin-top: 0px;
            width: 100%;
            background:#FF9966;
            color: #fafafa;
            
        }
        .row{
            display: table-row;
            
        }
        .form-group{
           
        }
        .form-group label{
            width: 10%;
            min-width:80px;
            max-width: 200px;
            display: table-cell;
        }
        .form-group .form-input{
            width: 70%;
            display: table-cell;
            margin: 10px auto;
        }
        .btn{
            text-align: center;
            margin-top: 20px;
        }
        button{
            display:inline;
            
            margin-right: 50px;
        }
        
    </style>
</head>
<body>
    <form>
        <div class="form">
           
        <h4>请你留言</h4>
            
            
            
            <div class="form-group row">
                <label>用户名:</label>
                <input class="form-input" name="username" type="text" placeholder="请输入你的用户名" />
            </div>
            <div class="form-group row">
                <label>密码:</label>
                <input class="form-input" name="password" type="password" placeholder="请输入你的密码" />
            </div>
            <div class="form-group row">
                <label>表情：</label>
                <div class="form-input">
                    <div class="row">
                        <input  type="radio" name="bq" /><img src="img/13.GIF" />
                        <input  type="radio" name="bq" /><img src="img/14.GIF" />
                        <input  type="radio" name="bq" /><img src="img/15.GIF" />
                        <input  type="radio" name="bq" /><img src="img/16.GIF" />
                        <input  type="radio" name="bq" /><img src="img/17.GIF" />
                        <input  type="radio" name="bq" /><img src="img/18.GIF" />
                    </div>
                    <div class="row">
                        <input  type="radio" name="bq" /><img src="img/19.GIF" />
                        <input  type="radio" name="bq" /><img src="img/20.GIF" />
                        <input  type="radio" name="bq" /><img src="img/21.GIF" />
                        <input  type="radio" name="bq" /><img src="img/22.GIF" />
                        <input  type="radio" name="bq" /><img src="img/23.GIF" />
                        <input  type="radio" name="bq" /><img src="img/SAD.GIF" />
                    </div>
                </div>
            </div>
            
            
            <div class="form-group row">
                <label>email:</label>
                <input class="form-input" name="email" type="email" placeholder="请输入你的邮箱" />
            </div>
            <div class="form-group row">
                <label>主题:</label>
                <input class="form-input" name="subject" placeholder="请输入你的主题" type="text" />
            </div>
            <div class="form-group row">
                <label >留言:</label>
                 <textarea rows="5" class="form-input" name="comment" placeholder="请输入你的留言"></textarea>
            </div>
        </div>
        <div class="btn">
             <button  type="submit">发表</button>
        <button type="reset">重置</button>
        </div>
      
    </form>
</body>
</html>